<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Copyright (c) 2006-2007. Adobe Systems Incorporated. All rights reserved. -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Menu Sample with Effects</title>
<link href="../../css/samples.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
	
	margin: 0;
	padding: 0;
	color: #000000;
	background-color: #FFFFFF;
}
#ul1 {
	float: left;
	height: 20px;
	padding-top: 30px;
	padding-left: 20px;
	margin: 0;
	list-style: none;
	background-color: #999999;
	z-index: 1000;
	width: 100%;
}
#ul1 li {
	float: left;
	margin: 0;
	padding: 0;
	font-size: 90%;
	position: relative;
	z-index: 1000;
}
.menu {
	float: left;
	border: 2px solid;
	margin-right: 16px;
	background-color: #FFFFFF;
	width: 90px;
	z-index: 1;
	border-color: #000000;
	text-align: center;
}
.menuContent {
	height: 0px;
	float: left;
	overflow: hidden;
	z-index: 50;
	width: 100%;
}
#ul1 .menu table {
	background-color: #FFFFFF;
	width: 100%;
}
a {
	color: #CC0000;
	text-decoration: none;
	cursor: pointer;
}
a:hover {
	background-color: #000000;
	text-decoration: none;
	list-style-type: none;
}
.menu a {
	display: block;
}
.descID {
	padding-left: 15px;
}
-->
</style>
<!--[if IE]>
<style type="text/css">
 #ul1
{
  
	overflow: hidden;

}  
</style>
<![endif]-->
<script language="" src="../../includes/SpryEffects.js" type="text/javascript">
</script>

</head>
<body id="bodyID" >
<h3 id="descID"> A combined effects menu based on the Slide Effect</h3>
<ul id="ul1">
  <li>
    <div class="menu"> <a href="#" onclick="menu_1.start();">Menu 1</a>
      <div id="slide1" class="menuContent">
        <div>
          <table>
            <tr>
              <th width="79" scope="col"><a href="http://www.adobe.com" target="_blank">ADOBE</a></th>
            </tr>
            <tr>
              <th scope="row">&nbsp;</th>
            </tr>
            <tr>
              <th scope="row">&nbsp;</th>
            </tr>
            <tr>
              <th scope="row">&nbsp;</th>
            </tr>
            <tr>
              <th scope="row">&nbsp;</th>
            </tr>
            <tr>
              <th scope="row">&nbsp;</th>
            </tr>
            <tr>
              <th scope="row">&nbsp;</th>
            </tr>
            <tr>
              <th scope="row">&nbsp;</th>
            </tr>
            <tr>
              <th scope="row">&nbsp;</th>
            </tr>
            <tr>
              <th scope="row">&nbsp;</th>
            </tr>
          </table>
          <a href="#" onclick="menu_1.start();">Close</a></div>
      </div>
      <script type="text/javascript">
				var menu_1 = new Spry.Effect.Cluster({toggle: true});

				var menu_1_slide = new Spry.Effect.Slide('slide1', {duration:1000,from: '0px',to: '230px', toggle:true});
				menu_1.addParallelEffect(menu_1_slide);

				var menu_1_hilite1 = new Spry.Effect.Highlight('bodyID', {duration:1000, from:'#FFFFFF' ,to: '#999999',restoreColor: '#999999', toggle:true});
				menu_1.addParallelEffect(menu_1_hilite1);

				var menu_1_hilite2 = new Spry.Effect.Highlight('descID',{duration: 1000, from:'#F3F3F3', to:'#CCCCCC',  restoreColor:'#CCCCCC', toggle:true});
				menu_1.addParallelEffect(menu_1_hilite2);
			</script>
    </div>
  </li>
  <li>
    <div class="menu"> <a href="#" onclick="menu_2.start();">Menu 2</a>
      <div id="slide2" class="menuContent">
        <div>
          <table id="menuTable2Id">
            <tr>
              <th  scope="col"><a href="http://labs.adobe.com/technologies/spry/" target="_blank">Spry</a></th>
            </tr>
            <tr>
              <th scope="row">&nbsp;</th>
            </tr>
            <tr>
              <th scope="row">&nbsp;</th>
            </tr>
            <tr>
              <th scope="row">&nbsp;</th>
            </tr>
            <tr>
              <th scope="row">&nbsp;</th>
            </tr>
            <tr>
              <th scope="row">&nbsp;</th>
            </tr>
            <tr>
              <th scope="row">&nbsp;</th>
            </tr>
            <tr>
              <th scope="row">&nbsp;</th>
            </tr>
            <tr>
              <th scope="row">&nbsp;</th>
            </tr>
            <tr>
              <th scope="row">&nbsp;</th>
            </tr>
          </table>
          <a href="#" onclick="menu_2.start();">Close</a> </div>
      </div>
      <script type="text/javascript">
				var menu_2 = new Spry.Effect.Cluster({toggle:true});

				var menu_2_slide = new Spry.Effect.Slide('slide2', {duration:1000, from:'0px', to:'230px',  toggle:true});
				menu_2.addParallelEffect(menu_2_slide);
				
				var menu_2_hilite = new Spry.Effect.Highlight('menuTable2Id',{duration: 1000,from: '#000000',to: '#F3F3F3',  restoreColor:'#FFFFFF', toggle:true});
				menu_2.addParallelEffect(menu_2_hilite);
			</script>
    </div>
  </li>
</ul>
<p style="padding-left:15px; padding-top:80px">If you open the menu on top a <a href="cluster_sample.html">cluster effect</a> is applied to target element, if you want to close the same target from a different location (Close Link), you must start the same cluster effect again when the toggle option enable. </p>
</body>
</html>
